<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>json对象</title>
</head>
<body>
    <box id="demo">

    </box>

    <script>
        // json对象在大括号中，对象可以时数组，多个键值对，逗号分隔
        var json={'name':'runoob','alexa':1000,'site':null};
        var x,y,z;
        // 使用.来访问json对象的值
        x=json.name;
        console.log(x);
        // 使用中括号来访问json对象的值
        y=json['site'];
        console.log(y);
        // 还可以使用for-in来循环json对象的属性 【只能获取到name alexa site  无法获取到它们的值】
        for(z in json){
            document.getElementById('demo').innerHTML+=z+'<br>';
            // 使用中括号来访问json对象的属性的值
            // document.getElementById('demo').innerHTML += json[z]+"<br>";
            var index=document.getElementById('demo');
            index.innerHTML += json[z]+"<br>";
        }
        console.log(z);
        console.log(index);
    </script>

    <script>
        // 嵌套json对象 json对象中可以包含其他json对象
        var json1={
            'name':'runoob',
            'alexa':'10000',
            'sites':{
                'site1':'www.runoob.com',
                'site2':'www.qq.com',
                'site3':'www.baidu.com',
            }
        }
        // 可以使用.或中括号来访问嵌套的json对象
        var a,b;
        // 使用.
        a=json1.sites.site1;
        console.log(a);
        // 使用中括号
        b=json1.sites['site1'];
        console.log(b);

        // 使用.来修改json对象的值
        json1.sites.site1='www.hcfa.com';
        console.log(json1.sites.site1);
        // 使用中括号来修改json对象的值
        json1.sites['site1']='www.taobao.com';
        console.log(json1.sites['site1']);

        // 使用delete关键字来删除json对象的属性
        delete json1.sites['site1'];
        console.log(json1);
        delete json1.sites.site2;
        console.log(json1);
    </script>
    
</body>
</html>